<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<section class="tabs grid_12 leading">
    <ul class="clearfix">
        <s:iterator value="#request.organizations" var="orgs" status="st">
            <s:if test="#request.orgs.id == #request.organizationId">
                <li><a href="javascript:void(0)"
                       onclick="loadChildrenOrgsByTab(${orgs.id})" class="current">${orgs.fullName}</a></li>
            </s:if>
            <s:else>
                <li><a href="javascript:void(0)"
                       onclick="loadChildrenOrgsByTab(${orgs.id})">${orgs.fullName}</a></li>
            </s:else>
        </s:iterator>
    </ul>
    <section>
        <s:iterator value="#request.organizations" var="orgs" status="st">
        <s:if test="#st.index == 0">
        <section class="clearfix" style="display: block;">
            </s:if>
            <s:else>
            <section class="clearfix" style="display: none;">
                </s:else>
                <s:if test="#request.showChildOrg">
                    <header class="grid_12 alpha omega">
                        <p>
                            <span>筛选： </span>
                            <select id="resign_reason_${orgs.id}">
                                <option value="">--离职原因--</option>
                                <option value="1">主动离职</option>
                                <option value="2">被动离职</option>
                                <select>
                                    <span id="org_sel_${orgs.id}"></span> <span>
							<select id="duty_sel_${orgs.id}" style="opacity: 0;"
                                    onchange="dutyChangeEvent(this)">
                                <option value="-1">所有岗位</option>
                            </select>
						</span>

						<span> <input type="button" value="点击搜索"
                                      onclick="javascript:searchClickEvent()">
						</span>
                        </p>
                    </header>
                </s:if>
                <div id="list_content_${orgs.id}" class="clearfix"></div>
            </section>
            </s:iterator>
        </section>
    </section>
    <script type="text/javascript">
        var currentTabOrgId = ${organizationId};
        var currentSelOrgId = ${organizationId};
        $(function () {
            setTimeout('loadChildrenOrgsByTab(${organizationId})', 600);
        })

        /**
         * Tab Change that load the child org
         * @param orgId
         */
        function loadChildrenOrgsByTab(orgId) {
            currentTabOrgId = orgId;
            currentSelOrgId = orgId;
            //load the organization
            $.ajax({
                type:"get",
                url:"/ajax/organization-children.xhtml?parentId=" + orgId,
                //data: "name=John&location=Boston",
                dataType:"json",
                success:function (data) {
                    var strHTML = "<div id=\"uniform-undefined-" + orgId + "\" class=\"selector\">";
                    strHTML += "<span style=\"-moz-user-select: none;\">所有</span>";
                    strHTML += "<select style='opacity: 0;' onchange='loadChildrenOrgs(this," + orgId + ")'>";
                    strHTML += "<option value=\"-1\">所有</option>";
                    if (data != null && data.length > 0) {
                        $.each(data, function (i, org) {
                            strHTML += "<option value=\"" + org.id + "\">" + org.fullName + "</option>";
                        });
                    }
                    strHTML += "</select></div>";
                    $("#org_sel_" + orgId).html("");
                    $("#org_sel_" + orgId).append(strHTML);
                }
            });
            // load the duty
            loadDutyByOrgId(orgId);
            // load the listcontent
            loadListContent("${ctx}${listAction}", orgId);
        }

        function loadChildrenOrgs(evtObj, parentId) {
            var evtObjId = evtObj.options[evtObj.selectedIndex].value;
            $(evtObj).prev().html($(evtObj).find("option:selected").text());
            currentSelOrgId = evtObjId < 0 ? parentId : evtObjId;
            $("#uniform-undefined-" + parentId).nextAll().remove();
            $.ajax({
                type:"get",
                url:"/ajax/organization-children.xhtml?parentId=" + evtObjId,
                //data: "name=John&location=Boston",
                dataType:"json",
                success:function (data) {
                    if (data != null && data.length > 0) {
                        var strHTML = "<div id=\"uniform-undefined-" + evtObjId + "\" class=\"selector\">";
                        strHTML += "<span style=\"-moz-user-select: none;\">所有</span>";
                        strHTML += "<select style='opacity: 0;' onchange='loadChildrenOrgs(this," + evtObjId + ")'>";
                        strHTML += "<option value=\"-1\">所有</option>";
                        $.each(data, function (i, org) {
                            strHTML += "<option value=\"" + org.id + "\">" + org.fullName + "</option>";
                        });
                        strHTML += "</select></div>";
                        $("#uniform-undefined-" + parentId).after(strHTML);
                    }
                }
            });
            //load duty list
            loadDutyByOrgId(currentSelOrgId);
            //load list content
            //loadListContent(evtObjId);
        }

        function loadDutyByOrgId(orgId) {
            //load the duty
            $.ajax({
                type:"get",
                url:"/ajax/duty-list.xhtml?organizationId=" + orgId,
                //data: "name=John&location=Boston",
                dataType:"json",
                success:function (data) {
                    var strHTML = "<option value=\"-1\">所有岗位</option>";
                    if (data != null && data.length > 0) {
                        $.each(data, function (i, duty) {
                            strHTML += "<option value=\"" + duty.id + "\">" + duty.dutyName + "</option>";
                        });
                    }
                    $("#duty_sel_" + currentTabOrgId).html("");
                    $("#duty_sel_" + currentTabOrgId).append(strHTML);
                }
            });
        }

        function dutyChangeEvent(evtObj) {
            $(evtObj).prev().html($(evtObj).find("option:selected").text());
        }
        /**
         * 刷新数据
         */
        function searchClickEvent() {
            loadListContent("${ctx}${listAction}", currentSelOrgId);
        }


        function loadListContent(url, organizationId) {
            var data = {"organizationId":organizationId, "dutyId":$("#duty_sel_" + currentTabOrgId).val()};
            $.ajax(url, {
                type:"POST",
                data:data,
                dataType:"html",
                cache:false,
                success:function (a) {
                    var obj = $("#list_content_" + currentTabOrgId);
                    obj.html("");
                    obj.append(a);
                },
                complete:function () {
                }
            });
        }


    </script>